<template>
  <div class="demo">
    <template>
      <div v-if="mode === 'edit'">
        <div
          style="width: 100%"
          v-if="swipeAlign == 'top' && swipeAlign != 'hide'"
        >
          <div style="text-align: center">{{ swipeStr }}</div>
        </div>
        <van-swipe
          v-if="currentDataList && currentDataList.length > 0"
          class="my-swipe"
          :autoplay="3000"
          indicator-color="white"
          :vertical="vertical"
          :style="{
            height: verticalHeight,
            marginTop: swipeMarginTop + 'px',
            marginLeft: swipeMarginLeft + 'px',
            marginRight: swipeMarginRight + 'px',
            marginBottom: swipeMarginBottom + 'px',
          }"
        >
          <van-swipe-item v-for="item in currentDataList" :key="item">
            <img :src="item.url" />
          </van-swipe-item>
        </van-swipe>
        <van-swipe
          v-else
          class="my-swipe"
          :autoplay="3000"
          indicator-color="white"
          :vertical="vertical"
          :style="{
            height: verticalHeight,
            marginTop: swipeMarginTop + 'px',
            marginLeft: swipeMarginLeft + 'px',
            marginRight: swipeMarginRight + 'px',
            marginBottom: swipeMarginBottom + 'px',
          }"
        >
          <van-swipe-item>1</van-swipe-item>
          <van-swipe-item>2</van-swipe-item>
          <van-swipe-item>3</van-swipe-item>
        </van-swipe>
        <div style="width: 100%">
          <div
            style="text-align: center"
            v-if="swipeAlign == 'bottom' && swipeAlign != 'hide'"
          >
            {{ swipeStr }}
          </div>
        </div>
      </div>
      <div v-else>{{ value }}</div>
    </template>
  </div>
</template>

<script>
import datasource from "../../mixins/datasource";
export default {
  name: "pm-swipe",
  mixins: [datasource],
  components: {},
  props: {
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    vertical: {
      type: Boolean,
      default: false,
    },
    verticalHeight: {
      type: String,
      default: "100px",
    },
    swipeAlign: {
      type: String,
      default: "",
    },
    swipeStr: {
      type: String,
      default: "",
    },
    swipeMarginTop: {
      default: "",
    },
    swipeMarginBottom: {
      default: "",
    },
    swipeMarginLeft: {
      default: "",
    },
    swipeMarginRight: {
      default: "",
    },
  },
  data() {
    return {
      currentDataList: [],
    };
  },
  computed: {},
  watch: {
    options: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val && val.length) {
          this.currentDataList = val.map((item) => {
            return {
              url: item._data.url,
              label: item._data.label,
            };
          });
        }
      },
    },
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.demo {
  width: 100%;
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    background-color: #39a9ed;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
